<template>
  <div class="process">
    <div style="width: 20vw" ref="p_right" class="p_right"></div>
    <div style="width: auto; padding-left: 2vw" ref="p_left" class="p_left">
      <div class="p_left_head">
        <h1 class="iconfont">信息处理</h1>
      </div>
      <div class="p_left_main">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <!-- 反馈 -->
          <el-tab-pane :label="noread_Plabel" name="first">
            <el-table :data="noread_Plist" style="width: 100%" max-height="400">
              <el-table-column  label="标题" width="180">
                <template #default="scope">
                <span  @click="showDetailP(scope.$index, scope.row)" class="Ptitle">{{scope.row.title}}</span> 
                </template>
                </el-table-column>
              <el-table-column prop="time" label="时间" width="180"> </el-table-column>
              <el-table-column label="发送者" prop="from_nickname"> </el-table-column>
              <el-table-column label="操作" align="right">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="hasread(scope.$index, scope.row)"
                    >标为已读</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="Paginationbox">
                 <MyPagination class="requirePagination" :total="totalnoread_Plist" :pageSize="10" layout="total, prev, pager, next" :isSmall="true" @getIndex="getPage"></MyPagination>
               </div>
          </el-tab-pane>
          <el-tab-pane :label="hasread_Plabel" name="second">
             <el-table :data="hasread_Plist" style="width: 100%" max-height="400">
              <el-table-column  label="标题" prop="title" width="180"> 
                <template #default="scope">
                <span @click="showDetailP(scope.$index, scope.row)" class="Ptitle">{{scope.row.title}}</span> 
                </template>
              </el-table-column>
              <el-table-column label="时间"  prop="time" width="180"> </el-table-column>
              <el-table-column label="发送者" prop="from_nickname"></el-table-column>
              <el-table-column label="操作" align="right">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="to_noread(scope.$index, scope.row)"
                    >标为未读</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    @click="toRecycleBin(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="Paginationbox">
                 <MyPagination class="requirePagination" :total="totalhasread_Plist" :pageSize="10" layout="total, prev, pager, next" :isSmall="true" @getIndex="getPage"></MyPagination>
               </div>
          </el-tab-pane>
          <el-tab-pane :label="recycle_Plabel" name="third">
             <el-table :data="recycle_Plist" style="width: 100%" max-height="400">
              <el-table-column label="标题" prop="title" width="180"> 
                <template #default="scope">
                <span @click="showDetailP(scope.$index, scope.row)" class="Ptitle">{{scope.row.title}}</span> 
                </template>
              </el-table-column>
              <el-table-column label="时间"  prop="time" width="180"> </el-table-column>
              <el-table-column label="发送者" prop="from_nickname"></el-table-column>
              <el-table-column label="操作" align="right">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="to_hasread(scope.$index, scope.row)"
                    >还原</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    @click="deleteMsg(scope.$index, scope.row)">永久删除</el-button>
                     </template>
              </el-table-column>
            </el-table>
            <div class="Paginationbox">
                 <MyPagination class="requirePagination" :total="totalrecycle_P" :pageSize="10" layout="total, prev, pager, next" :isSmall="true" @getIndex="getPage"></MyPagination>
               </div>
          </el-tab-pane>

          <!-- 举报 -->
          <el-tab-pane :label="noread_Rlabel" name="fourth">
             <el-table :data="noread_Rlist" style="width: 100%" max-height="400">
              <el-table-column  prop="title" label="标题" width="180"> 
                <template #default="scope">
                <span @click="showDetailR(scope.$index, scope.row)" class="Ptitle">{{scope.row.title}}</span> 
                </template>
              </el-table-column>
              <el-table-column prop="time" label="时间" width="180"> </el-table-column>
              <el-table-column label="发送者" prop="from_nickname"> </el-table-column>
              <el-table-column label="操作" align="right">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="hasread(scope.$index, scope.row)"
                    >标为已读</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="Paginationbox">
                 <MyPagination class="requirePagination" :total="totalnoread_Rlist" :pageSize="10" layout="total, prev, pager, next" :isSmall="true" @getIndex="getPage"></MyPagination>
               </div>
          </el-tab-pane>
          <el-tab-pane :label="hasread_Rlabel" name="fifth">
            <el-table :data="hasread_Rlist" style="width: 100%" max-height="400">
              <el-table-column  label="标题" prop="title" width="180"> 
                <template #default="scope">
                <span @click="showDetailR(scope.$index, scope.row)" class="Ptitle">{{scope.row.title}}</span> 
                </template>
              </el-table-column>
              <el-table-column label="时间"  prop="time" width="180"> </el-table-column>
              <el-table-column label="发送者" prop="from_nickname"></el-table-column>
              <el-table-column label="操作" align="right">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="to_noread(scope.$index, scope.row)"
                    >标为未读</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    @click="toRecycleBin(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="Paginationbox">
                 <MyPagination class="requirePagination" :total="totalhasread_Rlist" :pageSize="10" layout="total, prev, pager, next" :isSmall="true" @getIndex="getPage"></MyPagination>
               </div>
          </el-tab-pane>
          <el-tab-pane :label="recycle_Rlabel" name="sixth">
            <el-table :data="recycle_Rlist" style="width: 100%" max-height="400">
              <el-table-column  label="标题" prop="title" width="180"> 
                <template #default="scope">
                <span @click="showDetailR(scope.$index, scope.row)" class="Ptitle">{{scope.row.title}}</span> 
                </template>
              </el-table-column>
              <el-table-column label="时间"  prop="time" width="180"> </el-table-column>
              <el-table-column label="发送者" prop="from_nickname"></el-table-column>
              <el-table-column label="操作" align="right">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="to_hasread(scope.$index, scope.row)"
                    >还原</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    @click="deleteMsg(scope.$index, scope.row)">永久删除</el-button>
                     </template>
              </el-table-column>
            </el-table>
            <div class="Paginationbox">
                 <MyPagination class="requirePagination" :total="totalrecycle_R" :pageSize="10" layout="total, prev, pager, next" :isSmall="true" @getIndex="getPage"></MyPagination>
               </div>
          </el-tab-pane>
        </el-tabs>
        <el-dialog title="反馈信息内容" :visible.sync="dialogPVisible">
          <div class="myDialog">
            <h2 class="mdtitle" title>标题: {{ProDetail.title}}</h2>
            <div class="content">{{ProDetail.content}}</div>
            <div class="foot">
              <div>发送者: {{ProDetail.from_nickname}}</div>
              <div>发送时间: {{ProDetail.time}}</div>
              <span @click="ShowReply" style="color:#13aa52;margin-top:10px;cursor:pointer;">回复</span>
            </div>
            <div v-show="isShowReply" class="reply">
              <div class="reply_title">
                <el-input style="margin-bottom:15px;"
                  placeholder="请输入标题,不超过30个字"
                  maxlength="30"
                  v-model="replyTitle"
                  clearable>
                </el-input>
              </div>
              <div class="replycontent">
                <el-input style="margin-bottom:15px;"
                  type="textarea"
                  placeholder="请输入内容"
                  v-model="replyContent"
                  maxlength="300"
                  show-word-limit
                  >
                </el-input>
              </div>
              <div class="replyBtn">
                 <el-button @click.native="submitReply('P')" type="primary">提交回复</el-button>
              </div>
            </div>
          </div>
        </el-dialog>
        <el-dialog title="举报信息内容" :visible.sync="dialogRVisible">
         <div class="myDialog">
            <h2 class="mdtitle" title>标题: {{RepDetail.title}}</h2>
            <div class="content">{{ RepDetail.content}}</div>
            <div class="foot">
              <div>举报者: {{RepDetail.from_nickname}}</div>
              <div>举报者ID: {{RepDetail.from_uid}}</div>
              <div>被举报者: {{RepDetail.to_nickname}}</div>
              <div>被举报者ID: {{RepDetail.to_uid}}</div>
              <div>被举报文章ID: {{RepDetail.id}}</div>
              <div>举报时间: {{ RepDetail.time}}</div>
              <span @click="ShowReply" style="color:#13aa52;margin-top:10px;cursor:pointer;">回复</span>
            </div>
              <div v-show="isShowReply" class="reply">
              <div class="reply_title">
                <el-input style="margin-bottom:15px;"
                  placeholder="请输入标题,不超过30个字"
                  maxlength="30"
                  v-model="replyTitle"
                  clearable>
                </el-input>
              </div>
              <div class="replycontent">
                <el-input style="margin-bottom:15px;"
                  type="textarea"
                  placeholder="请输入内容"
                  v-model="replyContent"
                  maxlength="300"
                  show-word-limit
                  >
                </el-input>
              </div>
              <div class="replyBtn">
                 <el-button  @click.native="submitReply('R')" type="primary">提交回复</el-button>
              </div>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import {getProcessMsg,updateMsg,deleteMsg,reply} from "network/msg_process";
// 时间转换
import {format_second_to_Date} from "util/formatDate"
import MyPagination from 'components/my_pagination/MyPagination'//分页
export default {
  name: "Process",
  data() {
    return {
      replyTitle:'',//回复的标题
      replyContent:'',//回复的内容
      isShowReply:false,//是否显示回复区域
      activeName: "first",
      tabName: "first",
      type:"Proposals",
      dialogPVisible:false,//建议弹框
      ProDetail:{},//建议内容详细
      RepDetail:{},//举报内容详细
      dialogRVisible:false,//举报弹框
      noread_Plabel:'未读反馈',//未读反馈label
      noread_Plist: [], //未读反馈
      noread_PPage:1,//未读建议页码
      totalnoread_Plist:-1,//未读反馈总数
      hasread_Plabel:'已读反馈',//已读反馈label
      hasread_Plist: [], //已读反馈
      hasread_PPage:1,//已读反馈页码
      totalhasread_Plist:-1,//已读反馈总数
      recycle_Plabel:'回收站(反馈)',//回收站(反馈)label
      recycle_Plist: [], //回收站-反馈
      recycle_PPage:1,//回收站页码-反馈
      totalrecycle_P:-1,//回收站页码-反馈总数
      noread_Rlabel:'未读举报',//未读举报label
      noread_Rlist: [], //未读举报
      noread_RPage:1,//未读举报页码
      totalnoread_Rlist:-1,//未读举报总数
      hasread_Rlabel:'已读举报',//已读举报label
      hasread_Rlist: [], //已读举报
      hasread_RPage:1,//已读举报页码
      totalhasread_Rlist:-1,//已读建议总数
      recycle_Rlabel:'回收站(举报)',//回收站(举报)label
      recycle_Rlist: [], //回收站-举报
      recycle_RPage:1,//回收站页码-举报
      totalrecycle_R:-1,//回收站页码-举报总数
    };
  },
  watch: {
    lateralNavanimate(newValue, oldValue) {
      this.$refs.p_right.style.width = newValue + "vw";
      // this.$refs.a_left.style.width = (newValue+78.5)+'vw';
    },
    padding_left(newV, oldV) {
      this.$refs.p_left.style.paddingLeft = newV + "vw";
      if (newV == 2) {
        this.$refs.p_left.style.paddingLeft = "7vw";
      }

      console.log("newV:", newV);
    },
    totalnoread_Plist(n,o){
      this.noread_Plabel = '未读反馈'+'('+n+')';
    },
    totalhasread_Plist(n,o){
      this.hasread_Plabel = '已读反馈'+'('+n+')'
    },
    totalrecycle_P(n,o){
      this.recycle_Plabel = '回收站(反馈)'+'('+n+')'
    },
    totalnoread_Rlist(n,o){
      this.noread_Rlabel = '未读举报'+'('+n+')'
    },
    totalhasread_Rlist(n,o){
      this.hasread_Rlabel = '已读举报'+'('+n+')'
    },
    totalrecycle_R(n,o){
      this.recycle_Rlabel = '回收站(举报)'+'('+n+')'
    }
  },
  methods: {
    ...mapMutations(["changenavIndex"]),
    handleClick(tab, event) {
      let that = this;
      //选项栏点击
      console.log(tab, event);
      if (tab.name == "first") {
        console.log("点击了未读建议");
        this.tabName = "first";
        this.type = "Proposals"
         getProcessMsg(this.type,that.noread_PPage).then(res=>{
      console.log("建议数据获取：",res)
      that.noread_Plist = res.filter((CurV,index)=>{//未读建议
      // time, format
       CurV.time = format_second_to_Date(CurV.time*1,"yyyy-MM-dd HH:mm:ss")
       if(CurV.hasRead == false&&CurV.is_recycle == false){
         return CurV;
       } 
    })
    that.totalnoread_Plist = that.noread_Plist.length;
  })
       
      } else if (tab.name == "second") {
         console.log("点击了已读建议");
         this.tabName = "second";
         this.type = "Proposals"
         getProcessMsg(this.type,that.hasread_PPage).then(res=>{
            that.hasread_Plist = res.filter((CurV,index)=>{//已读建议
       CurV.time = format_second_to_Date(CurV.time*1,"yyyy-MM-dd HH:mm:ss")
          if(CurV.hasRead == true&&CurV.is_recycle == false){
            return CurV;
           }
        })
          that.totalhasread_Plist = that.hasread_Plist.length
         })
        
      } else if (tab.name == "third") {
        console.log("点击了建议-回收站");
        this.tabName = "third";
        this.type = "Proposals"
        getProcessMsg(this.type,that.recycle_PPage).then(res=>{
            this.recycle_Plist = res.filter((CurV,index)=>{//回收站 - 反馈
        CurV.time = format_second_to_Date(CurV.time*1,"yyyy-MM-dd HH:mm:ss")
            if(CurV.is_recycle == true){
              return CurV
            }
          })
            this.totalrecycle_P = this.recycle_Plist.length
         })
       
      } else if (tab.name == "fourth") {
        console.log("点击了未读举报");
        this.tabName = "fourth";
        this.type = "Reports"
         getProcessMsg(this.type,that.noread_RPage).then(res=>{
            that.noread_Rlist = res.filter((CurV,index)=>{//未读举报
            CurV.time = format_second_to_Date(CurV.time*1,"yyyy-MM-dd HH:mm:ss")
            if(CurV.hasRead == false&&CurV.is_recycle == false){
            return CurV;
            }
          })
            that.totalnoread_Rlist = that.noread_Rlist.length;
         })
      } else if (tab.name == "fifth") {
          console.log("点击了已读举报");
          this.tabName = "fifth";
          this.type = "Reports"
         getProcessMsg(this.type,that.hasread_RPage).then(res=>{
           that.hasread_Rlist = res.filter((CurV,index)=>{//已读举报
       CurV.time = format_second_to_Date(CurV.time*1,"yyyy-MM-dd HH:mm:ss")
            if(CurV.hasRead == true&&CurV.is_recycle == false){
              return CurV;
            }
          })
            that.totalhasread_Rlist = that.hasread_Rlist.length
         })
      } else if (tab.name == "sixth") {
        console.log("点击了举报-回收站");
        this.tabName = "sixth";
        this.type = "Reports"
        getProcessMsg(this.type,that.recycle_RPage).then(res=>{
           that.recycle_Rlist = res.filter((CurV,index)=>{//回收站 - 举报
        CurV.time = format_second_to_Date(CurV.time*1,"yyyy-MM-dd HH:mm:ss")
            if(CurV.is_recycle == true){
            return CurV
            }
          })
          that.totalrecycle_R = that.recycle_Rlist.length;
         })
      }
    },
      hasread(index, row) {//标记为已读信息
      let that = this;
        console.log(index, row);
        // type,_id,hasRead,is_recycle
        updateMsg(that.type,row._id,true,false).then(res=>{
          if(res.status==200){
             console.log(row._id+"已读反馈")
             console.log("标为已读的后台响应：",res)
             if(that.tabName=='first'){
               that.noread_Plist.splice(index,1)
               that.totalnoread_Plist = that.totalnoread_Plist-1
               that.totalhasread_Plist++
             }else if(that.tabName=='fourth'){
               that.noread_Rlist.splice(index,1)
               that.totalnoread_Rlist = that.totalnoread_Rlist-1
               that.totalhasread_Rlist++
             }
          }
        })
      },
      to_noread(index, row){//标记为未读信息
         let that = this;
         console.log(index, row);
            updateMsg(that.type,row._id,false,false).then(res=>{
          if(res.status==200){
             console.log(row._id+"未读反馈")
             console.log("标为未读的后台响应：",res)
             if(that.tabName=='second'){
               that.hasread_Plist.splice(index,1)
               that.totalnoread_Plist++;
               that.totalhasread_Plist--
             }else if(that.tabName=='fifth'){
               that.hasread_Rlist.splice(index,1)
               that.totalnoread_Rlist++
               that.totalhasread_Rlist--;
             }
          }
        })
      },
      toRecycleBin(index, row){//放到回收站
        let that = this;
        console.log(index, row);
           updateMsg(that.type,row._id,true,true).then(res=>{
          if(res.status==200){
             console.log(row._id+"放到回收站")
             console.log("放回回收站的后台响应：",res)
             if(that.tabName=='second'){
               that.hasread_Plist.splice(index,1)
               that.totalhasread_Plist--
               that.totalrecycle_P++
             }else if(that.tabName=='fifth'){
               that.hasread_Rlist.splice(index,1)
               that.totalhasread_Rlist--;
               that.totalrecycle_R++
             }
          }
        })
      },
      to_hasread(index, row){//还原为已读
        let that = this;
        console.log(index, row);
        updateMsg(that.type,row._id,true,false).then(res=>{
          if(res.status==200){
             console.log(row._id+"还原为已读")
             console.log("还原为已读的后台响应：",res)
             if(that.tabName=='third'){
               that.recycle_Plist.splice(index,1)
               that.totalrecycle_P--
               that.totalhasread_Plist++
             }else if(that.tabName=='sixth'){
               that.recycle_Rlist.splice(index,1)
               that.totalrecycle_R--
               that.totalhasread_Rlist++;
             }
          }
        })
      },
      deleteMsg(index, row){//永久删除
        let that = this;
        console.log(index, row);
        // type,_id
        deleteMsg(that.type,row._id).then(res=>{
            if(res.status==200){
             console.log(row._id+"永久删除")
             console.log("永久删除的后台响应：",res)
             if(that.tabName=='first'){
               that.recycle_Plist.splice(index,1)
               that.totalrecycle_P--
             }else if(that.tabName=='sixth'){
               that.recycle_Rlist.splice(index,1)
               that.totalrecycle_R--
             }
             this.$message('成功永久删除此记录!');
          }
        })
      },
      getPage(index){//按页码请求数据
      console.log("获取第"+index+"页的信息");
      
      let that = this;
      
      if (this.tabName == "first") {
        that.noread_PPage = index;
      } else if (this.tabName == "second") {
        that.hasread_PPage = index;
      } else if (this.tabName == "third") {
        that.recycle_PPage = index;
      } else if (this.tabName == "fourth") {
        that.noread_RPage = index;
      } else if (this.tabName == "fifth") {
        that.hasread_RPage = index;
      } else if (this.tabName == "sixth") {
        that.recycle_RPage = index;
      }
      getProcessMsg(index,this.type).then(res=>{
        console.log(res);
      if(this.tabName=='first'){
        that.noread_Plist = res;
        that.totalnoread_Plist = that.noread_Plist.length;
      }else if(this.tabName=='second'){
        that.hasread_Plist = res;
        that.totalhasread_Plist = that.hasread_Plist.length
      }else if(this.tabName=='third'){
        that.recycle_Plist = res;
        that.totalrecycle_P = that.recycle_Plist.length
      }else if(this.tabName=='fourth'){
        that.noread_Rlist = res;
        that.totalnoread_Rlist = that.noread_Rlist.length;
      }else if(this.tabName=='fifth'){
        that.hasread_Rlist = res;
        that.totalhasread_Rlist = that.hasread_Rlist.length
      }else if(this.tabName=='sixth'){
        that.recycle_Rlist = res;
        that.totalrecycle_R = that.recycle_Rlist.length;
      }

      })
    },
    showDetailP(index, row){//建议信息详细
      console.log("建议信息详细：",index, row);
      this.ProDetail = row;
      this.dialogPVisible = true
    },
     showDetailR(index, row){//举报信息详细
      console.log("举报信息详细：",index, row);
      this.RepDetail = row;
      this.dialogRVisible = true
    },
    ShowReply(){//显示隐藏回复区域
      this.isShowReply = !this.isShowReply
    },
    submitReply(type){
      let that = this
      if(type=="P"){
        // title,content,to_id,to_status,report_id
        if(this.replyTitle==''||this.replyContent==''){
          this.$message('标题或内容为空,请补充完整');
        }else{
          reply(this.replyTitle,this.replyContent,this.ProDetail.from_uid,this.ProDetail.from_status,null).then(res=>{
            console.log("回复用户的反馈的后台回应：",res)
          })
        }
        
      }else{
        if(this.replyTitle==''||this.replyContent==''){
          this.$message('标题或内容为空,请补充完整');
        }else{
          reply(this.replyTitle,this.replyContent,this.RepDetail.from_uid,this.RepDetail.from_status,this.RepDetail.to_uid).then(res=>{
            console.log("回复用户的举报的后台回应：",res)
          })
        }
      }
      this.replyContent = '';
      this.replyTitle = '';
      this.$message("成功回复一条内容!")
    }
  },
  computed: {
    ...mapState({
      lateralNavanimate: (state) => state.lateralNavanimate,
      padding_left: (state) => state.padding_left,
    }),
  },
  mounted() {
    // 获取信息 type,page
    getProcessMsg("Proposals",1).then(res=>{
      console.log("建议数据获取：",res)
      this.noread_Plist = res.filter((CurV,index)=>{//未读建议
      // time, format
       CurV.time = format_second_to_Date(CurV.time*1,"yyyy-MM-dd HH:mm:ss")
       if(CurV.hasRead == false&&CurV.is_recycle == false){
         return CurV;
       } 
    })
    this.totalnoread_Plist = this.noread_Plist.length;

      this.hasread_Plist = res.filter((CurV,index)=>{//已读建议
      //  CurV.time = format_second_to_Date(CurV.time*1,"yyyy-MM-dd HH:mm:ss")
       if(CurV.hasRead == true&&CurV.is_recycle == false){
         return CurV;
       }
      })
      this.totalhasread_Plist = this.hasread_Plist.length

       this.recycle_Plist = res.filter((CurV,index)=>{//回收站 - 反馈
        // CurV.time = format_second_to_Date(CurV.time*1,"yyyy-MM-dd HH:mm:ss")
       if(CurV.is_recycle == true){
         return CurV
       }
      })
      this.totalrecycle_P = this.recycle_Plist.length
    })
      getProcessMsg("Reports",1).then(res=>{
      console.log("举报数据获取：",res)
       this.noread_Rlist = res.filter((CurV,index)=>{//未读举报
        CurV.time = format_second_to_Date(CurV.time*1,"yyyy-MM-dd HH:mm:ss")
        if(CurV.hasRead == false&&CurV.is_recycle == false){
         return CurV;
       }
      })
      this.totalnoread_Rlist = this.noread_Rlist.length;

      this.hasread_Rlist = res.filter((CurV,index)=>{//已读举报
      //  CurV.time = format_second_to_Date(CurV.time*1,"yyyy-MM-dd HH:mm:ss")
         if(CurV.hasRead == true&&CurV.is_recycle == false){
         return CurV;
       }
      })
      this.totalhasread_Rlist = this.hasread_Rlist.length

       this.recycle_Rlist = res.filter((CurV,index)=>{//回收站 - 举报
        // CurV.time = format_second_to_Date(CurV.time*1,"yyyy-MM-dd HH:mm:ss")
        if(CurV.is_recycle == true){
         return CurV
       }
      })
      this.totalrecycle_R = this.recycle_Rlist.length;
    })
    
  },
  activated() {
    this.$refs.p_left.style.paddingLeft = this.padding_left + "vw";
    if (this.padding_left == 2) {
      this.$refs.p_right.style.width = 22 - this.padding_left + "vw";
    }
    this.changenavIndex(4);
  },
  components: {MyPagination},
};
</script>

<style lang="less" scoped>
  .Paginationbox{
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    // background-color: black;
    height: 1.5rem;
    .requirePagination{
      position: absolute;
      left: 50%;
      transform: translateX(-200%);
    }
  }
.process {
  display: flex;
  width: 100vw;
  .p_right {
    box-sizing: border-box;
  }
  .p_left {
    position: relative;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    padding-left: 8vw;
    flex: 1;
    color: #505050;
    .p_left_head {
      line-height: 2rem;
      h1 {
        font-size: 0.8rem;
      }
      position: absolute;
    }
    .p_left_main {
      margin-top: 2rem;
      background-color: #fff;
      padding-left: 2%;
      padding-right: 2%;
      width: 90%;
    }
  }
}
/deep/.Ptitle{
  color: #20a0ff;
  cursor: pointer;
}
/deep/.el-dialog__body{
  padding-top: 0px ;
}
.myDialog{
  .mdtitle{
    text-align: center;
    font-weight: 500;
    margin-bottom: 15px;
  }
  .content{
    box-sizing: border-box;
    font-size: 0.5rem;
    text-indent: 2em;
    background-color: burlywood;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
  }
  .foot{
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100%;
    div{
      width: 100%;
      margin-bottom: 5px;
      display: flex;
      flex-direction: row-reverse;
    }
  }
  .reply{
   .replyBtn{
     display: flex;
     flex-direction: row-reverse;
   } 
  }
}
/deep/.el-table__body-wrapper::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  }
  /deep/.el-table__body-wrapper::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius   : 10px;
  background-color: rgba(0, 0, 0, 0.1);
  background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
  );
  }
  /deep/.el-table__body-wrapper::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #ededed;
  border-radius: 10px;
  }
</style>